<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      @returnBack="$emit('returnModify')"
    >
      <template v-slot:full-button>
        <el-button @click="save()">保存</el-button>
      </template>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <!-- form -->
          <page-form
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :disabled="formInfo.disabled"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :rules="formInfo.rules"
            :label-width="formInfo.labelWidth"
            @handleEvent="handleEvent"
          >
            <template v-slot:form-depotName>
              <el-input
                v-model="formInfo.data.depotName"
                type="input"
                class="not-mongolia"
                :disabled="true"
                placeholder="请选择仓库"
              >
                <template #append>
                  <el-icon @click="openDepotWindow"><MoreFilled /></el-icon>
                </template>
              </el-input>
            </template>
            <template v-slot:form-consumeTime>
              <el-time-picker
                v-model="formInfo.data.consumeTime"
                placeholder="请选择消耗时间"
                value-format="HH:mm:ss"
                :disabled="formInfo.data.autoConsume == 1 ? false : true"
              />
            </template>
          </page-form>
        </div>
      </div>
    </NewFullScreen>
    <SelectDepot
      v-if="selectDepotInfo.visible"
      v-model:show-dialog="selectDepotInfo.visible"
      :check-box="false"
      :highlight-row="true"
      :query="selectDepotInfo.query"
      :save-empty="true"
      @callback="selectDepotCallBack"
    />
  </div>
</template>

<script setup name="smartCabinetListModify">
import { createSmartCabinet } from '@/api/smartCabinet'

const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
})

const formInfo = ref({
  ref: null,
  data: {
    autoConsume: 0,
    temperatureHumitureMonitor: 0,
  },
  fieldList: [
    {
      label: '智能柜编码',
      value: 'code',
      type: 'input',
      required: true,
      maxlength: 32,
    },
    {
      label: '智能柜名称',
      value: 'name',
      type: 'input',
      required: true,
      maxlength: 32,
    },
    {
      label: '智能柜位置',
      value: 'address',
      type: 'input',
    },
    {
      label: '智能柜类型',
      value: 'type',
      type: 'select-model',
      code: 'smart_cabinet_type',
      required: true,
    },
    {
      label: '所属仓库',
      value: 'depotName',
      type: 'slot',
      required: true,
    },
    {
      label: '所属部门',
      value: 'deptName',
      type: 'input',
      disabled: true,
      required: true,
    },
    {
      label: '客户端',
      value: 'clientId',
      type: 'select-model',
      code: 'client_id',
      required: true,
    },
    {
      label: '是否定时消耗',
      value: 'autoConsume',
      type: 'select-model',
      code: 'yes_or_no',
      event: 'autoConsume',
    },
    {
      label: '消耗时间(每天)',
      value: 'consumeTime',
      type: 'slot',
    },
    {
      label: '出柜消耗间隔',
      value: 'consumeIntervalTime',
      type: 'select-model',
      code: 'consume_interval_time',
      disabled: true,
    },
    {
      label: '存储条件',
      value: 'storageCondition',
      type: 'select-model',
      code: 'smart_cabinet_storage_condition',
      required: true,
    },
    {
      label: '是否支持温湿度监控',
      value: 'temperatureHumitureMonitor',
      type: 'select-model',
      code: 'yes_or_no',
      required: true,
    },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
    },
  ],
  rules: {},
  labelWidth: '120px',
})
const selectDepotInfo = ref({
  visible: false,
  query: {
    depotAuth: 'id',
    status: 1,
    useTypeId: 1,
    isCargoSpaceManage: 0,
  },
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    // 更新父组件visible
    emits('update:visible', val)
  },
})

onMounted(() => {
  initRules()
})
// 初始化校验规则
function initRules() {
  formInfo.value.rules = proxy.$initRules(formInfo.value.fieldList)
  formInfo.value.rules.consumeTime = [
    { required: false, message: '请选择消耗时间', trigger: 'change' },
  ]
  formInfo.value.rules.consumeIntervalTime = [
    { required: false, message: '请选择出柜消耗间隔', trigger: 'change' },
  ]
}
function disabledFieldListItem(disabled, nameValue) {
  let fieldList = formInfo.value.fieldList
  fieldList.forEach((item) => {
    if (nameValue === item.value) {
      item.disabled = disabled
    }
  })
}
function handleEvent(event, data) {
  if (event === 'autoConsume') {
    if (data == 1) {
      disabledFieldListItem(false, 'consumeIntervalTime')
      formInfo.value.rules.consumeTime[0].required = true
      formInfo.value.rules.consumeIntervalTime[0].required = true
    } else if (data == 0) {
      disabledFieldListItem(true, 'consumeIntervalTime')
      formInfo.value.data.consumeTime = ''
      formInfo.value.data.consumeIntervalTime = ''
      formInfo.value.rules.consumeTime[0].required = false
      formInfo.value.rules.consumeIntervalTime[0].required = false
    }
  }
}
function openDepotWindow() {
  selectDepotInfo.value.visible = true
}
function selectDepotCallBack(row) {
  if (row && row.id) {
    formInfo.value.data.depotId = row.id
    formInfo.value.data.depotName = row.name
    formInfo.value.data.deptId = row.deptId
    formInfo.value.data.deptName = row.deptName
  } else {
    formInfo.value.data.depotId = -2
    formInfo.value.data.depotName = ''
    formInfo.value.data.deptId = -2
    formInfo.value.data.deptName = ''
  }
}

function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      createSmartCabinet(formInfo.value.data).then((resp) => {
        if (resp && resp.success) {
          showDialog.value = false
          emits('returnModify')
        }
      })
    }
  })
}
</script>

<style scoped></style>
